<template>
    <div class="wrapper">
        <div class="header">
            <div class="logo">
                <!--<img src="../assets/images/logo.png" class="logo-img" height="18" alt="quick clip">-->
            </div>

            <div class="project-box">
                <!--<div class="user" @click="logout" title="退出">-->
                <!--<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40"-->
                <!--enable-background="new 0 0 40 40" xml:space="preserve">-->
                <!--<path fill="none" stroke="#BABABA" stroke-width="2" stroke-linecap="round"-->
                <!--stroke-linejoin="round" d="M26.4,14.1-->
                <!--C28,15.7,29,18,29,20.5c0,5-4,9-9,9s-9-4-9-9c0-2.4,1-4.6,2.5-6.2"></path>-->
                <!--<line fill="none" stroke="#BABABA" stroke-width="2" stroke-linecap="round"-->
                <!--stroke-linejoin="round" x1="20" y1="10.6" x2="20" y2="17.8"></line>-->
                <!--</svg>-->
                <!--</div>-->
            </div>
        </div>
        <div class="main">
            <div class="middle-wrap">
                <div class="left-menu">
                    <vue-scroll>
                        <div class="left-menu-item" :class="{ active :item._id == _id}"
                             v-for="(item, index) in attachmentList"
                             @click="menuHandle(item._id, index)">{{item.title}}
                        </div>
                    </vue-scroll>
                </div>
                <div class="content">
                    <div class="left">
                        <div class="image-box" style="width: 810px; height:456px;" ref="imageBox">
                            <!--<img src="https://wapx.cmvideo.cn/publish/poms/fsv/2019/01/21/7500022274/67/5c4579fb-f00c-4254-8e6c-76e05e8d3059.jpg"-->
                            <!--alt="">-->
                            <vueCropper
                                    ref="cropper"
                                    :img="option.img"
                                    :outputType="option.outputType"
                                    :info="true"
                                    :canMoveBox="option.canMoveBox"
                                    :canMove="option.canMove"
                                    :canScale="option.canScale"
                                    :autoCrop="option.autoCrop"
                                    :centerBox="option.centerBox"
                                    :mode="option.mode"
                                    :autoCropWidth="option.autoCropWidth"
                                    :autoCropHeight="option.autoCropHeight"
                                    @imgLoad="imgLoad"
                                    @cropMoving="cropMoving"
                            ></vueCropper>
                        </div>
                    </div>
                    <div class="right">
                        <div class="list-wrap">
                            <vue-scroll>
                                <div class="img-item" v-for="(item, index) of clipList"
                                     @click="openImg(item.filepath,index, item._id, $event)">
                                    <img :src="item.filepath"
                                         alt="">
                                    <div class="del-btn">
                                        删除
                                    </div>
                                </div>
                            </vue-scroll>
                        </div>
                    </div>
                </div>
                <div class="handler-box">
                    <div class="btn-area">
                        <v-button :inline="true" :width="'46'" :height="'38'" @click="tabHandle('filter')">滤镜
                        </v-button>
                        <v-button :inline="true" :width="'80'" :height="'38'" @click="tabHandle('zoom')">放大/缩小
                        </v-button>
                        <v-button :inline="true" :width="'46'" :height="'38'" @click="rotateLeftHandle()"
                                  style="margin-left: 15px">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-rotate-ccw">
                                <polyline points="1 4 1 10 7 10"></polyline>
                                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                            </svg>
                        </v-button>
                        <v-button :inline="true" :width="'46'" :height="'38'" @click="rotateRightHandle()"
                                  style="margin-right: 15px!important;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="feather feather-rotate-cw">
                                <polyline points="23 4 23 10 17 10"></polyline>
                                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                            </svg>
                        </v-button>

                        <v-button :inline="true" :width="'46'" :height="'38'" @click="clippingHandler()">剪裁</v-button>
                        <v-button :inline="true" :width="'80'" :height="'38'" style="margin-right: 15px!important;"
                                  @click="clippingCancelHandler()">
                            取消剪裁
                        </v-button>

                        <v-button :inline="true" :width="'67'" :height="'38'" @click="tabHandle('watermark')">加水印
                        </v-button>


                        <div class="filter" v-show="curTab === 'filter'">
                            <div class="btn-item">
                                <span>对比度</span>
                                <input type="range" class="range" min="0" max="200" value="100"
                                       v-model="contrast"
                                       @input="contrastHandle()">
                                <span id="contrast">{{contrast}}</span>
                            </div>
                            <div class="btn-item">
                                <span>亮度</span>
                                <input type="range" class="range" min="0" max="200" value="100"
                                       @input="brightnessHandle()"
                                       v-model="brightness">
                                <span id="brightness">{{brightness}}</span>
                            </div>
                            <div class="btn-item">
                                <span>饱和度</span>
                                <input type="range" class="range" min="0" max="200" value="100"
                                       @input="saturabilityHandle()"
                                       v-model="saturability">
                                <span id="saturability">{{saturability}}</span>
                            </div>
                        </div>

                        <div class="zoom" v-show="curTab === 'zoom'">
                            <div class="btn-item">
                                <span>放大/缩小</span>
                                <input type="range" class="range" min="-8" max="8" value="0"
                                       @input="zoomHandle()"
                                       v-model="zoom">
                                <span id="zoom">{{zoom}}</span>
                                <span>{{imageRatio}}</span>
                            </div>
                        </div>

                        <div class="rotate" v-show="curTab === 'rotate'">
                            <div class="btn-item">
                                <span>角度</span>
                                <input type="range" class="range" max="360" value="0"
                                       @input="rotateHandle()"
                                       v-model="rotate">
                                <span id="rotate">{{rotate}}</span>
                            </div>
                        </div>

                        <div class="watermark" v-show="curTab === 'watermark'">
                            <div class="btn-item">
                                <span>水印内容</span>
                                <input class="watermark-text" type="text"
                                       v-model="waterText">
                                <span id="watermark"></span>
                            </div>
                            <div class="btn-item">
                                <span>水平位置</span>
                                <input class="waterX waterMouseWheel" data-type="waterX" type="text"
                                       v-model="waterX">
                                <span id="waterX"></span>
                            </div>
                            <div class="btn-item">
                                <span>垂直位置</span>
                                <input class="waterY waterMouseWheel" data-type="waterY" type="text"
                                       v-model="waterY">
                                <span id="waterY"></span>
                            </div>
                            <div class="btn-item">
                                <span>字体大小</span>
                                <input type="range" class="range" max="64" min="12"
                                       v-model="fontSize">
                                <span id="fontSize">{{fontSize}}px</span>
                            </div>
                            <div class="btn-item">
                                <span>字体颜色</span>
                                <compact-picker v-model="fontColorObj"></compact-picker>
                            </div>
                        </div>
                    </div>
                    <div class="btn-save">
                        <v-button :inline="true" :width="'80'" :height="'38'" style="background-color: #eea236"
                              @click="submitClip()">放入工作台
                        </v-button>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
    import vuescroll from 'vuescroll';
    import {isInArray, isInteger} from "../utils";
    import {Compact} from 'vue-color'
    import VInput from '../components/common/v-input'
    import VButton from '../components/common/v-button'
    import {VueCropper} from 'vue-cropper'

    export default {
        name: 'home',
        components: {
            VButton, VInput, VueCropper, 'compact-picker': Compact
        },
        watch: {
            waterText() {
                this.waterHandle()
            },
            waterX(val) {
                if (isNaN(parseInt(val))) {
                    this.waterX = 1
                }
                this.waterHandle()
            },
            waterY(val) {
                if (isNaN(parseInt(val))) {
                    this.waterY = 1
                }
                this.waterHandle()
            },
            fontSize() {
                this.waterHandle()
            },
            fontColorObj(val) {
                this.fontColor = val.hex
                this.waterHandle()
            }
        },
        data() {
            return {
                _id: '',
                card_id: '',
                attachmentList: [],
                attachmentActive: null,
                player: null,
                curTab: null,
                clipList: [],
                zoom: 0,
                rotate: 0,
                contrast: 100,
                brightness: 100,
                saturability: 100,
                // imgSrc: 'http://cdn.xyxiao.cn/Landscape_1.jpg',
                imgSrc: '',
                imgWidth: 0,
                imgHeight: 0,
                waterText: '',          // 水印文字
                fontSize: 14,
                waterX: 1,              // 水平x
                waterY: 1,              // 垂直y
                fontColor: '#000',
                fontColorObj: '#000',
                scale: 0,
                option: {
                    img: '',
                    centerBox: true,
                    canScale: false,
                    autoCrop: false,
                    mode: 'contain',
                    canMoveBox: true,
                    canMove: true,
                    autoCropWidth: '240px',
                    autoCropHeight: '160px',
                    outputType: 'png'
                },
                water: 0,
                imageRatio: '-- / --',
                isClip: false
            }
        },
        methods: {
            handleScroll(e) {
                e.preventDefault();
                var upOrDown = 'down';
                if (e.deltaY < 0) {
                    upOrDown = 'up';
                }
                let queryClassList = e.target.className.split(' ')
                if (isInArray('waterMouseWheel', queryClassList)) {
                    let type = e.target.dataset.type;
                    switch (type) {
                        case 'waterX' :
                            if (upOrDown === 'up') {
                                this.waterX = parseInt(this.waterX) + 1
                            } else if (upOrDown === 'down' && parseInt(this.waterX) > 1) {
                                this.waterX = parseInt(this.waterX) - 1
                            }
                            break;
                        case 'waterY' :
                            if (upOrDown === 'up') {
                                this.waterY = parseInt(this.waterY) + 1
                            } else if (upOrDown === 'down' && parseInt(this.waterY) > 1) {
                                this.waterY = parseInt(this.waterY) - 1
                            }
                            break;
                        default:
                            break;
                    }
                }
            },
            waterHandle() {
                let div = document.createElement('div')
                div.style.position = 'absolute'
                div.style.zIndex = '999'
                div.style.left = this.waterX + 'px'
                div.style.fontSize = this.fontSize + 'px'
                div.style.color = this.fontColor
                div.style.lineHeight = '1'
                div.style.top = this.waterY + 'px'
                div.style.overflow = 'hidden';
                div.style.width = '100%';
                div.style.whiteSpace = 'nowrap';
                div.classList.add('water-text')
                div.innerHTML = this.waterText
                let waterTextBox = document.querySelector('.water-text')
                if (!waterTextBox) {
                    document.querySelector('.cropper-box-canvas').appendChild(div)
                } else {
                    waterTextBox.parentNode.removeChild(waterTextBox)
                    document.querySelector('.cropper-box-canvas').appendChild(div)
                }
            },
            tabHandle(tag) {
                this.curTab = tag
            },
            /**
             * 提交截图
             */
            submitClip() {
                let that = this
                let pic = this.$refs.cropper.getImgAxis()
                let clip = this.$refs.cropper.getCropAxis()
                let x = clip.x1 - pic.x1
                let y = clip.y1 - pic.y1

                let realWidth = (pic.x1) - (pic.x2);
                let realHeight = (pic.y1) - (pic.y2);
                // 截图框
                let cropW = this.$refs.cropper.cropW
                let cropH = this.$refs.cropper.cropH
                let imgSrcW = this.imgWidth
                let imgSrcH = this.imgHeight
                let maxVal = 1
                if (imgSrcW > 810 || imgSrcH > 456) {
                    let tempW = imgSrcW / 810
                    let tempH = imgSrcH / 456
                    maxVal = Math.max(tempW, tempH)
                }

                let params = {
                    _id: that._id,
                    filter: {
                        brigbtness: that.brightness,
                        saturate: that.saturability,
                        contrast: that.contrast
                    },
                    rotate: {
                        angle: that.rotate
                    },
                    scaling: {
                        ratio: that.zoom
                    },
                    img: {
                        width: realWidth,
                        height: realHeight
                    },
                    watermark: {
                        position: that.water,
                        color: that.fontColor,
                        waterText: that.waterText,
                        x: Math.floor((1 + this.zoom / 10) * parseInt(that.waterX)),
                        y: Math.floor((1 + this.zoom / 10) * parseInt(that.waterY)),
                        size: that.fontSize,
                        width: document.querySelector('.water-text') ? document.querySelector('.water-text').clientWidth : 0,
                        height: document.querySelector('.water-text') ? document.querySelector('.water-text').clientHeight : 0
                    },
                    tailoring: {
                        x: that.isClip ? parseInt(x) : 0,
                        y: that.isClip ? parseInt(y) : 0,
                        width: parseInt(cropW) || Math.floor((1 + this.zoom / 10) * parseInt(that.imgWidth)),
                        height: parseInt(cropH) || Math.floor((1 + this.zoom / 10) * parseInt(that.imgHeight))
                    }
                }
                // 提交截取
                that.$axios.post('/workbenchadmin/image/operate', params).then(function (res) {
                    that.clipList.unshift({
                        filepath: res.data.imgpath,
                        _id: res.data._id
                    })
                    that.water = 0
                    let con = document.querySelector('.cropper-box-canvas')
                    if (con.querySelector('.water-img')) {
                        con.removeChild(con.querySelector('.water-img'))
                    }
                }).catch(function (err) {
                    that.$toasted.error('图片获取失败')
                })
            },

            menuHandle(id) {
                this._id = id
                let url = window.location.origin + '?_id=' + this._id + '&card_id=' + this.card_id
                history.pushState({}, '', url);
                console.log('res')
                this.paramsRe()
                this.getImage()
            },

            openImg(url, index, id, event) {
                let that = this
                if (event.target.className === 'del-btn') {
                    let r = confirm('确认删除吗？')
                    if (r) {
                        that.delClipImageDelete(id)
                    }
                } else {
                    window.open(url)
                }
            },
            paramsRe() {
                let reset = {
                    filter: {
                        brigbtness: 100,
                        saturate: 100,
                        contrast: 100
                    },
                    rotate: {
                        angle: 0
                    },
                    scaling: {
                        ratio: 0
                    },
                    watermark: {
                        position: 0,
                        color: '#000',
                        waterText: '',
                        x: Math.floor((1 + 0 / 10) * parseInt(1)),
                        y: Math.floor((1 + 0 / 10) * parseInt(1)),
                        size: 14,
                        width: 0,
                        height: 0
                    },
                    tailoring: {
                        x: 0,
                        y: 0,
                        width: 0,
                        height: 0
                    }
                }
                this.brigbtness = reset.filter.brigbtness
                this.saturate = reset.filter.saturate
                this.contrast = reset.filter.contrast
                this.rotate = 0
                this.zoom = reset.scaling.ratio
                this.water = 0
                this.fontColor = '#000'
                this.waterText = ''
                this.waterX = 0
                this.waterY = 0
                this.fontSize = 14
            },
            delClipImageDelete(id) {
                let that = this
                that.$axios.post('/workbenchadmin/image/clipDelete', {
                    _id: id,
                    card_id: that.card_id
                }).then(function (res) {
                    if (res.status == 0) {
                        for (let i = 0; i < that.clipList.length; i++) {
                            if (that.clipList[i]._id == id) {
                                that.clipList.splice(i, 1)
                            }
                        }
                        that.$toasted.success('删除成功')
                    } else {
                        that.$toasted.error('error')
                    }
                }).catch(function (err) {
                    that.$toasted.error('ERROR')
                })
            },
            /**
             *  滤镜
             */
            filterHandle() {
                this.$refs.cropper.clearCrop()
            },

            /**
             *  对比度
             */
            contrastHandle() {
                CSSfilter(document.querySelector('.cropper-box-canvas'), 'contrast', this.contrast)
                CSSfilter(document.querySelector('.cropper-box-canvas'), 'render')
            },

            /**
             *  亮度
             */
            brightnessHandle() {
                CSSfilter(document.querySelector('.cropper-box-canvas'), 'bright', this.brightness)
                CSSfilter(document.querySelector('.cropper-box-canvas'), 'render')
            },

            /**
             *  饱和度
             */
            saturabilityHandle() {
                CSSfilter(document.querySelector('.cropper-box-canvas'), 'sat', this.saturability)
                CSSfilter(document.querySelector('.cropper-box-canvas'), 'render')
            },

            zoomHandle() {
                this.getImageRatio(this.imgWidth, this.imgHeight)
                this.scale = this.zoom / 10
                this.handleImgZoom()
            },
            /**
             * 处理图片缩放
             **/
            handleImgZoom() {
                let cropper = this.$refs.cropper
                cropper.scale = 1 + this.scale
            },
            getImageRatio(width, height) {
                this.imageRatio = Math.floor((1 + this.zoom / 10) * parseInt(width)) + ' / ' + Math.floor((1 + this.zoom / 10) * parseInt(height))
            },
            /**
             *  图片剪裁
             */
            clippingHandler() {
                this.isClip = true
                this.$refs.cropper.startCrop()
                this.$refs.cropper.goAutoCrop()
            },
            clippingCancelHandler() {
                this.isClip = false
                this.$refs.cropper.clearCrop()
                this.$refs.cropper.stopCrop()
            },

            cropMoving(data) {
            },
            imgLoad(data) {
                this.clippingHandler()
                this.clippingCancelHandler()
                this.handleZoomInitValue()
            },
            cropImage() {
                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
            },
            rotateLeftHandle() {
                this.rotate -= 90
                this.$refs.cropper.rotateLeft()
            },
            rotateRightHandle() {
                this.rotate += 90
                this.$refs.cropper.rotateRight()
            },

            logout() {
                window.location.href = '/admin/sign/out'
            },

            getImage() {
                let that = this
                let params = {
                    _id: that._id,
                    card_id: that.card_id
                }
                that.$axios.post('/workbenchadmin/image', params).then(function (res) {
                    that.imgSrc = res.data.filepath
                    that.imgWidth = res.data.width
                    that.imgHeight = res.data.height
                    that.option.img = res.data.filepath
                    that.clipList = res.data.clip_images || []
                    that.attachmentList = res.data.attachment_list || []

                }).catch(function (err) {
                    that.$toasted.error('图片获取失败')
                })
            },

            handleZoomInitValue() {
                let imgSrcW = this.imgWidth
                let imgSrcH = this.imgHeight
                let maxVal = 0
                if (imgSrcW > 810 || imgSrcH > 456) {
                    let tempW = (imgSrcW - 810) / imgSrcW - 1
                    let tempH = (imgSrcH - 456) / imgSrcH - 1
                    maxVal = Math.ceil(Math.max(tempW, tempH) * 10) / 10
                }
                this.zoom = (1 + maxVal) < 1 ? -Math.ceil((1 + maxVal) * 10) : maxVal
                this.zoomHandle()
            },

            getQueryString(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        },
        mounted() {
            let that = this
            this.$nextTick(() => {
                that._id = that.getQueryString('_id')
                that.card_id = that.getQueryString('card_id')
                that.getImage()
                window.addEventListener('mousewheel', this.handleScroll, true);
            })
        }
    }
</script>

<style lang="scss">
    @import "../assets/common/styles/variables.scss";
    @import "../assets/common/styles/mixin.scss";

    input[type=range] {
        background-color: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid transparent;
    }

    .range::-webkit-slider-runnable-track {
        background: #434751;
        border: 0;
        border-radius: 3px;
        height: 2px;
        width: 100%
    }

    .range::-webkit-slider-thumb {
        -webkit-appearance: none;
        background: #fa9e48;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        height: 16px;
        margin-top: -6px;
        width: 16px
    }

    .range:focus {
        outline: none
    }

    /*global*/
    .module {
        .module-title {
            height: 30px;
            line-height: 30px;
            color: $color-font-master;
            font-size: $fontsize-small;

            .active {
                color: $color-font-active;
            }

            span {
                display: inline-block;
                padding: 0 18px;
                height: 30px;
                background-color: $color-background-master;
            }
        }
    }

    .tabs {
        width: 100%;
        font-size: $fontsize-small;
        color: $color-font-master;
        @include clearfix();

        .tab {
            position: relative;
            float: left;
            display: inline-block;
            cursor: pointer;

            span {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                padding: 0 18px;
                cursor: pointer;
                background-color: transparent;

                &:hover {
                    color: $color-font-active;
                }

            }

            &.active {
                color: $color-font-active;
                background-color: $color-background-master;

                &::after {
                    position: absolute;
                    bottom: 0;
                    left: 15%;
                    display: inline-block;
                    content: '';
                    width: 70%;
                    height: 2px;
                    border-radius: 2px;
                    background: $color-background-light-s;
                }
            }
        }
    }

    .date-picker-input {
        display: inline-block;
        width: 158px;
        height: 28px;
        line-height: 28px;
        align-items: center;
        text-align: center;
        font-size: $fontsize-small;
        color: $input-color;
        border: 1px solid #333;
        background-color: $input-bgc;
        outline: none;
    }

    .mx-input-append {
        background-color: transparent;
    }

    .mx-calendar-icon {
        color: $color-font-master;
    }

    /*layout*/
    .wrapper {
        position: relative;
        width: 100%;
        min-width: 1280px;
        height: 100%;
        background-color: $color-background-dark;
        overflow: hidden;
    }

    .header {
        height: 40px;
        background: $color-background-master;
        border: 2px solid $color-background-dark;
        border-top: 0;
        box-sizing: border-box;

        .logo {
            height: 40px;
            float: left;
        }

        .logo-img {
            margin-top: 10px;
            margin-left: 6px;
        }

        .project-box {
            text-align: right;
            width: 660px;
            height: 40px;
            float: right;
            padding-right: 20px;
        }

        .layout {
            position: relative;
            display: inline-block;
            width: 116px;
            line-height: 38px;
            vertical-align: top;
            text-align: left;
            border-right: 1px solid $color-border-master;

            .layout-icon {
                position: absolute;
                top: 12px;
                left: 0;
                width: 16px;
                height: 16px;
            }

            .layout-text {
                font-size: 12px;
                color: $color-font-master;
                padding: 0 10px 0 25px;
            }

            .layout-arrow {
                width: 10px;
            }
        }

        .network-status {
            display: inline-block;
            width: 40px;
            height: 40px;
            overflow: hidden;
            text-align: center;
            vertical-align: top;
        }

        .message {
            display: inline-block;
            width: 40px;
            height: 40px;
            overflow: hidden;
            text-align: center;
            vertical-align: top;
        }

        .user {
            display: inline-block;
            line-height: 38px;
            cursor: pointer;
            margin-left: 12px;

            svg {
                width: 32px;
                height: 40px;
                vertical-align: top;
            }

            span {
                font-size: 12px;
                color: $color-font-master;
            }
        }
    }

    .left-wrap, .middle-wrap, .right-wrap, .bottom-wrap {
        border: 2px solid $color-background-dark;
        background-color: $color-background-master;
    }

    .middle-wrap {
        position: relative;

        .content {
            background-color: #000;
            @include clearfix;
        }

        .left {
            width: 810px;
            float: left;
        }

        .right {
            width: 214px;
            float: left;
        }
    }

    .main {
        position: relative;
        height: calc(100% - 40px);
    }

    .middle-wrap {
        width: 1152px;
        height: 100%;
        margin: 0 auto;
    }

    .left-menu {
        float: left;
        width: 128px;
        height: 458px;
    }

    .left-menu-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 6px;
        font-size: 14px;
        color: #fff;
        background-color: #333333;
        margin-bottom: 4px;
        cursor: pointer;

        &.active {
            background: rgb(238, 162, 54);
        }
    }

    .image-box {
        position: relative;
        width: 100%;
        height: 456px;
        overflow: hidden;
        background-color: #000;

        /*img {*/
        /*width: 100%;*/
        /*}*/
    }

    .handler-box {
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .video-time {
        width: 80px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        float: left;
    }

    .input-area {
        width: 640px;
        float: left;
        margin-right: 20px;
    }

    .btn-area {
        width: 790px;
        float: left;
        overflow: hidden;

        button {
            margin-right: 6px !important;
        }
    }

    .btn-save {
        /*width: 100px;*/
        float: right;
    }

    .list-wrap {
        height: 452px;
        width: 200px;

        .img-item {
            position: relative;
            width: 188px;
            height: 110px;
            margin: 0 auto 5px;
            border: none;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .del-btn {
        position: absolute;
        right: 6px;
        bottom: 6px;
        color: #fff;
        font-size: 12px;
        width: 38px;
        height: 26px;
        text-align: center;
        line-height: 26px;
    }

    .btn-item {
        height: 32px;
        line-height: 32px;

        span {
            display: inline-block;
            width: 110px;
            font-size: 12px;
            box-sizing: border-box;
            padding: 0 18px;
            color: $color-font-master;
        }

        input[type = 'range'] {
            width: 320px;
            vertical-align: middle;
        }

        input[type = 'text'] {
            background: transparent;
            font-size: 15px;
            width: 200px;
            height: 25px;
            line-height: 25px;
            padding-left: 5px;
            color: white;
            border: 1px solid #f5f5f5;
        }

        select {
            background: transparent;
            width: 200px;
            font-size: 15px;
            height: 25px;
            line-height: 25px;
            padding-left: 5px;
            border: 1px solid #f5f5f5;
        }

        .vc-compact {
            margin-left: 110px;
            margin-top: -22px;
        }

        .watermark-text {

        }
    }

    .filter, .zoom, .rotate, .watermark {
        margin-top: 12px;
    }

</style>
